<template>
  <div class="home">
      {{name}}
      {{age}}
      <Son :name='name' :age='age' @fun="fun"/>
  </div>
</template>

<script>
  
// @ is an alias to /src
import {ref,reactive,onMounted,toRefs,provide} from 'vue'
import Son from '../components/Son'
export default {
  setup(){
     const state=reactive({
      name:'lyk',
      age:18,
    })
    provide('name',state.name)
    const fun = (age) =>{
      state.age=age
    }
    onMounted(()=>{
        
    })
    return {
      ...toRefs(state),
      fun
    }
  },
  name: 'Home',
  components: {
      Son
  }
}
</script>
